<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>产品项目</title>
<meta name="decorator" content="default" />
<style type="text/css">
</style>
</head>
<body>
	<div class="container">
		<div data-role="navbar">
			<ul>
				<li><a href="${ctx}/cash/consume/buyStoreProductPage"
					class="ui-btn-active">产品项目</a></li>
				<li><a href="${ctx}/cash/consume/doStoreCarePage">护理项目</a></li>
			</ul>
		</div>
		<tags:message content="${message}" />
		<form:form id="inputForm2" modelAttribute="shoppingCart"
			action="${ctx}/cash/consume/payNonmembers" method="post"
			class="form-input">
			<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}" />
			<input id="pageSize" name="pageSize" type="hidden"
				value="${page.pageSize}" />
			<form:input id="employeeProduct-ID" name="employeeProduct-ID"
				type="hidden" path="employeeProduct.id" />

			<div class="icon-buttons">
				<input type="button" data-inline="true" data-icon="delete"
					onclick="return cashPro.dropNomemberShopping('${ctx}')"
					data-iconpos="notext" value="取消消费" /> <input type="submit"
					data-inline="true" data-icon="check" data-iconpos="notext"
					value="确认消费" />
			</div>
		</form:form>
		<br />
		<table id="contentTable" data-role="table"
			class="ui-responsive table-stroke">
			<thead>
				<tr>
					<th colspan="5" style="text-align:center;">已选产品</th>
				</tr>
				<tr>
					<th>产品名称</th>
					<th>产品规格</th>
					<th>数量</th>
					<th>零售价</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tbody">
				<c:forEach items="${shoppingCart.products}" var="productCart">
					<c:if test="${productCart.storeProduct.product_type==1}">
						<tr id="${productCart.storeProduct.id}"
							name="${productCart.storeProduct.storeSelfProduct.name}"
							spec="${productCart.storeProduct.storeSelfProduct.spec}"
							amount="${productCart.count}"
							price="${productCart.storeProduct.storeSelfProduct.retail_price}" 
							employee="${productCart.employee.id}">
							<td>${productCart.storeProduct.storeSelfProduct.name}</td>
							<td>${productCart.storeProduct.storeSelfProduct.spec}</td>
							<td id="amount">${productCart.count}</td>
							<td>${productCart.storeProduct.storeSelfProduct.retail_price}</td>
							<td><a data-role="button" data-inline="true"
								data-icon="delete" data-iconpos="notext"
								onclick="deleteTr('确定删除产品：${productCart.storeProduct.storeSelfProduct.name}?','${productCart.storeProduct.id}','self')">删除</a>
							</td>
						</tr>
					</c:if>
					<c:if test="${productCart.storeProduct.product_type==0}">
						<tr id="${productCart.storeProduct.id}"
							name="${productCart.storeProduct.product.name}"
							spec="${productCart.storeProduct.product.spec}"
							amount="${productCart.count}"
							price="${productCart.storeProduct.product.retail_price}"
                            employee="${productCart.employee.id}">
							<td>${productCart.storeProduct.product.name}</td>
							<td>${productCart.storeProduct.product.spec}</td>
							<td id="amount">${productCart.count}</td>
							<td>${productCart.storeProduct.product.retail_price}</td>
							<td><a data-role="button" data-inline="true"
								data-icon="delete" data-iconpos="notext"
								onclick="deleteTr('确定删除产品：${productCart.storeProduct.product.name}?','${productCart.storeProduct.id}','system')">删除</a>
							</td>
						</tr>
					</c:if>
				</c:forEach>
			</tbody>
		</table>
		<div class="pagination">${page}</div>
		<form:form id="inputForm" modelAttribute="storeProduct" action="#"
			method="post">
			<form:hidden path="storeProduct.id" id="productID" />
			<input type="hidden" id="type" name="type" value="" />
			<input type="hidden" id="editing" name="editing" value="add" />
			<input type="hidden" id="currentAmount" name="currentAmount"
				value="0" />

			<div data-role="fieldcontain" id="selectionfields">
				<label for="productName">产品名称:</label> <input id="productName"
					type="text" name="productName" readonly="readonly" />
					 <a
					id="selectButton" href="#selectProduct2" data-rel="popup"
					data-role="button" data-inline="true" data-position-to="window"
					data-transition="pop">系统产品</a>
					 <a
					id="selectButton" href="#selectProduct" data-rel="popup"
					data-role="button" data-inline="true" data-position-to="window"
					data-transition="pop" >自营产品</a>
			</div>


			<div data-role="fieldcontain">
				<label>产品规格</label> <input id="productSpec" type="text"
					name="productSpec" readonly="readonly" />
			</div>
			<div data-role="fieldcontain">
				<label>零售价格</label> <input id="productRetailPrice" type="text"
					name="productRetailPrice" readonly="readonly" />
			</div>
			<div data-role="fieldcontain">
				<label>购买数量</label>
				<form:input path="count" type="text" />
			</div>
			<div data-role="fieldcontain">
				<label>服务专员:</label>
				<form:select id="employeeProductID" path="employee.id"
					name="employeeProductID">
					<c:forEach var="employee" items="${employees}">
						<option value="${employee.id}" id="employee-${employee.id}"
							${employee.id==shoppingCart.employeeProduct.id?'selected':''}>
							${employee.name}</option>
					</c:forEach>
				</form:select>
			</div>
			<div id="okbutton" style="margin: auto; text-align: center;">
				<button type="submit" data-inline="true">确认添加</button>
			</div>
		</form:form>
	</div>
	<script type="text/javascript">
		$().ready(function() {
			loadingProductList("#selectProduct", "self");
			loadingProductList("#selectProduct2", "system");
			registerEditSelection();
			registerSubmitHandler("productName");
			$("#inputForm").valid();
			cashPro.submitShopping("#inputForm2", "${ctx}");
			disableExitMenu();
		});
		
		function registerSelection(dialogID, type) {// registerSelectionListener
			$(dialogID + " ul li").delegate("a", "click", function() {
				var item = $(this);
				$("#type").val(type);
				$("#productID").val(item.attr("id"));
				$("#productName").val(item.attr("name"));
				$("#productSpec").val(item.attr("spec"));
				$("#productRetailPrice").val(item.attr("price"));
				$(dialogID).popup("close");
				$("#contentTable tbody tr").removeClass("select_active");
				$("#editing").val("add");
				$("#currentAmount").val(0);
				$("div#okbutton button").text("确认添加");

				$("#inputForm").valid();
			});
		}

		function registerEditSelection() {// registerSelectionListener
			$("#contentTable tbody").delegate("tr", "click", function() {
				var item = $(this);
				$("#productID").val(item.attr("id"));
				$("#productName").val(item.attr("name"));
				$("#productSpec").val(item.attr("spec"));
				$("#productRetailPrice").val(item.attr("price"));
				$("#count").val(item.attr("amount"));
				$("#editing").val("update");
				$("#currentAmount").val(item.attr("amount"));
				$("div#okbutton button").text("保存更改");

				$("#contentTable tbody tr").removeClass("select_active");
				item.addClass("select_active");
			});
		}
		function deleteTr(message, productID, type) {
			var fun = function() {
				jQuery.ajax({
					//start ajax
					url : "clientDeleteProduct",
					type : "post",
					data : {
						"productID" : function() {
							return productID;
						},
						"type" : type,
					},
					success : function(data) {
						showTip(data);
						var objs = eval(data);
						if (objs[0].result) {
							showTip("删除成功");
							var dialogID = "";
							if ('system' == type) {
								dialogID = "#selectProduct2";
							} else {
								dialogID = "#selectProduct";
							}
							removeItem(dialogID, productID);
							if (productID == $("#productID").val()) {
								cashPro.clear();
							}
						} else {
							showTip(objs[0].message);
						}
					},
					error : function(data) {
						showTip("删除失败");
					}
				//end ajax
				});
			};// fun
			global.confirm(message, fun);// confirm
		}

		function removeItem(dialogID, productID) {
			removeChild("tbody", productID);
			$(dialogID + " ul a#" + productID).show();
			$("#contentTable").trigger("create");
		}

		function addItem(type) {
			var pName = $("#productName").val();
			var spec = $("#productSpec").val();
			var pid = $("#productID").val();
			var amount = $("#count").val();
			var retailPrice = $("#productRetailPrice").val();
			var employeeName=$("div#employeeProductID-button span").html();
			var line = "<tr id="
				+ pid+" name="+pName+" spec="+spec+" price="+retailPrice+" amount="+amount
				+ ">"
					+ "<td>"
					+ pName
					+ "</td>"
					+ "<td>"
					+ spec
					+ "</td>"
					+ "<td id='amount'>"
					+ amount
					+ "</td>"
					+ "<td>"
					+ retailPrice
					+ "</td>"
					+ "<td>"
					+ "<a data-role='button' data-inline='true' data-icon='delete' data-iconpos='notext' onclick="
					+ "deleteTr('确定删除产品："
					+ pName
					+ "?',"
					+ pid
					+ ",'"
					+ type
					+ "')>删除</a>" + "</td>" + "</tr>";
			$("#contentTable").append(line);
			$("#contentTable").trigger("create");
			var dialogID = "";
			if ('system' == type) {
				dialogID = "#selectProduct2";
			} else {
				dialogID = "#selectProduct";
			}
			$(dialogID + " ul a#" + pid).hide();
		}

		function updateTrAmount(trID, amount) {
			$("#contentTable tr#" + trID).attr("amount", amount);
			$("#contentTable tr#" + trID + " td#amount").text(amount);
			$("#contentTable").trigger("create");
		}

		function doCommit() {
			jQuery.ajax({
				url : "clientAddProduct",
				type : "post",
				data : {
					productID : function() {
						return $("#productID").val();
					},
					employeeID : function() {
						return $("#employeeProductID").val();
					},
					amount : function() {
						return $('#count').val();
					},
					type : $("#type").val(),
					editing : $("#editing").val(),
					currentAmount : $("#currentAmount").val(),
				},
				success : function(data) {
					var objs = eval(data);
					showTip(objs.result);
					if (objs[0].result) {
						if (objs[0].editing == "update") {
							showTip("保存成功");
							updateTrAmount(objs[0].id, objs[0].amount);
						} else {
							showTip("添加成功");
							addItem($("#type").val());
						}
						cashPro.clear();
					} else {
						showTip(objs[0].message);
					}
				},
				error : function(data) {
					showTip("保存失败");
				}
			});// end ajax
		}
		function registerSubmitHandler(productNameKey) {// validateInputForm
			$("#inputForm").validate({
				submitHandler : function(form) {
					var editing = $("#editing").val();
					var amount = $('#count').val();
					var currentAmount = $("#currentAmount").val();
					if (editing == "update") {
						if (amount == currentAmount) {
							showTip("数量未更新");
							return;
						}
					}
					doCommit();
				},
				focusInvalid : false,
				rules : {
					count : {
						required : true,
						digits : true,
						min : 1,
						max : 10000
					},
					productNameKey : {
						required : true
					}
				},
				errorContainer : "#messageBox",
				errorPlacement : function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox") || element.is(":radio")) {
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				},
				messages : {}
			});// validate
		}
		function loadingProductList(dialogID, type) {
			jQuery
					.ajax({
						url : "clientLoadingProduct",
						type : "post",
						data : {
							"type" : type,
						},
						success : function(data) {
							var objs = eval(data);
							var addedIds = eval(objs[0].addedProducts);
							var html = "";
							for ( var index = 1; index < objs.length; index++) {
								var element = objs[index];
								html += "<li><a name='" + element.name + "' spec='"
							+ element.spec + "'	id='" + element.id
							+ "' price='" + element.retailPrice + "' href='#'>"
										+ element.name + "</a></li>";
							}
							$(dialogID + " ul").append(html);
							$(dialogID + " ul").listview('refresh');
							registerSelection(dialogID, type);
							for (index = 0; index < addedIds.length; index++) {
								element = addedIds[index];
								$(dialogID + " ul" + " a#" + element.id).hide();
							}
						},
						error : function(data) {
							showTip("加载产品列表失败");
						}
					});// end ajax
		};
	</script>
</body>
</html>
